<template>
    <div id="userList">
        <Breadcrumb>
            <a-tabs v-model="activeName">
                <a-tab-pane tab="用户管理" key="first"></a-tab-pane>
                <a-tab-pane tab="配置管理" key="second"></a-tab-pane>
                <a-tab-pane tab="角色管理" key="third"></a-tab-pane>
                <a-tab-pane tab="定时任务补偿" key="fourth"></a-tab-pane>
            </a-tabs>
        </Breadcrumb>
        <Filters
            block
            :form="searchForm"
            :filterData="filterData"
            @confirm="changePage(1)"
        />
        <div class="container">
            <DataTable
                rowKey="adminId"
                :btns="btns"
                :tableData="Data"
                :tableColumn="tableColumn"
                :rowSelection="rowSelection"
                @refresh="getList"
                :pageConfig="pageConfig"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class UserList extends Vue {
    activeName: string = 'first'
    searchForm: any = {
        status: '',
        date: [],
        searchValue: ''
    }
    get filterData () {
        return {
            status: {
                label: '按状态筛选',
                type: 'select',
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    filterable: true,
                    options: this.statusList
                }
            },
            date: {
                label: '注册时间',
                type: 'daterange',
                template: {
                    clearable: true
                }
            },
            searchValue: {
                label: '搜索用户名/手机号',
                type: 'input',
                template: {
                    placeholder: '搜索用户名/手机号',
                    clearable: true
                }
            },
            statu3s: {
                label: '按状态筛选',
                type: 'select',
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    filterable: true,
                    options: this.statusList
                }
            },
            statu33s: {
                label: '按状态筛选',
                type: 'select',
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    filterable: true,
                    options: this.statusList
                }
            },
            statu333s: {
                label: '按状态筛选',
                type: 'select',
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    filterable: true,
                    options: this.statusList
                }
            }
        }
    }
    btns: any[] = [
        {
            label: '新增',
            icon: 'add'
        },
        {
            label: '下载模板',
            icon: 'download'
        },
        {
            label: '导出',
            icon: 'export',
            upload: true
        }
    ]
    Data: any[] = [
        {
            userId: '23232222222222222222222',
            portrait: 'http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg',
            nickname: '323',
            mobile: '4444',
            createTime: '354243',
            statusValue: '32323',
            statusValue2: false
        },
        {
            userId: '2323214',
            portrait: 'http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg',
            nickname: '323',
            mobile: '4444',
            createTime: '354243',
            statusValue: '32323',
            statusValue2: false
        },
        {
            userId: '232322',
            portrait: 'http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg',
            nickname: '323',
            mobile: '4444',
            createTime: '354243',
            statusValue: '32323',
            statusValue2: false
        },
        {
            userId: '232323',
            portrait: 'http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg',
            nickname: '323',
            mobile: '4444',
            createTime: '354243',
            statusValue: '32323',
            statusValue2: false
        }
    ]
    tableColumn: any = {
        userId: {
            label: '用户ID'
        },
        portrait: {
            label: '用户头像',
            type: 'avatar'
        },
        nickname: {
            label: '用户名'
        },
        mobile: {
            label: '手机号'
        },
        createTime: {
            label: '注册时间'
        },
        statusValue: {
            label: '单价',
            type: 'inputNumber'
        },
        statusValue2: {
            label: '状态',
            type: 'switch'
        },
        action: {
            label: '操作',
            width: 180,
            template: [
                {
                    tag: 'a',
                    text: '删除',
                    confirm: this.handleUpdateStatus
                },
                {
                    tag: 'router-link',
                    text: '详情',
                    path: '/userManage/userList/detail',
                    query: {
                        userId: ''
                    }
                }
            ]
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 5,
        onChange: this.changePage
    }
    statusList: any[] = [
        {
            value: '',
            label: '全部'
        },
        {
            value: true,
            label: '上线'
        },
        {
            value: false,
            label: '下线'
        }
    ]
    selectedRowKeys: string[] = []

    get rowSelection () {
        return {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.changeSelection
        }
    }

    init () {
        // this.getList()
    }
    getSearchForm () {
        // let { searchForm, currentPage, size } = this;
        // let form = Object.assign({ page: currentPage, size }, searchForm);
        // let [ startTime, endTime ] = util.formatDate(form.date)
        // Object.assign(form, {
        //     startTime,
        //     endTime
        // });
        // delete form.date
        let { current, pageSize } = this.pageConfig;
        let form = { page: current, size: pageSize }
        return form;
    }
    getList () {
        let form = this.getSearchForm();
        this.$api.adminAdminUserListFetch(form).then((res: any) => {
            this.Data = res.data.records
            this.pageConfig.total = res.data.total
        })
    }
    changePage (val: number) {
        this.pageConfig.current = val
        this.getList()
    }
    handleUpdateStatus ({ userId, status }: any) {
        let data = { userId }
        this.$api.userStatusFetch(data).then(() => {
            this.$message.success(`${status === 1 ? '冻结' : '解冻'}成功`)
            this.getList()
        })
    }
    handleClick () {

    }
    changeSelection (val: any) {
        this.selectedRowKeys = val
    }
}
</script>

<style lang="scss">
</style>
